<template>
    <div id="salesList">
        <h2>该销售员负责的客户列表</h2>
        <template>
            <el-table :data="salesToCustomers" border style="width: 100%">
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="age" label="年龄"> </el-table-column>
                <el-table-column prop="gender" label="性别"> </el-table-column>
                <el-table-column prop="phone" label="联系方式">
                </el-table-column>
            </el-table>
        </template>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

  <script>
import { createNamespacedHelpers } from "vuex";
var { mapActions, mapMutations, mapState } = createNamespacedHelpers(
    "customersManage"
);
export default {
    //_id是销售员的id
    props: ["_id"],
    methods: {
        ...mapActions(["getSalesToCustomers"]),
        ...mapMutations(["changePageSize", "changeCurrentPage"]),
        //  改变每页数据的条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.changePageSize(val);
        },
        //  改变当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.changeCurrentPage(val);
        },
    },
    watch: {
        pageSize() {
            this.getSalesToCustomers(this.belongToSales);
        },
        currentPage() {
            this.getSalesToCustomers(this.belongToSales);
        },
        belongToSales() {
            this.getSalesToCustomers(this.belongToSales);
        },
    },
    computed: {
        //在计算属性中调用辅助函数
        ...mapState([
            "salesToCustomers",
            "total",
            "pages",
            "pageSize",
            "currentPage",
            "belongToSales",
        ]),
    },
    mounted() {
        //  页面挂载完成去获取该销售员的客户数据
        this.getSalesToCustomers(this.belongToSales);
    },
};
</script>
<style lang="scss">
#salesList {
    padding-left: 20px;
    & > h2 {
        padding-left: 10px;
        margin-bottom: 20px;
        height: 50px;
        line-height: 50px;
        text-align: left;
        border-bottom: 1px solid lightGray;
    }
    .block {
        margin-top: 20px;
        text-align: left;
    }
}
</style>